<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>Web邮箱</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="top-header">
            <div class="header-left">
                <div class="logo">用户邮箱系统</div>
            </div>
            <div class="header-center">
                <div class="search-bar">
                    <input type="text" id="sender-search-input" class="layui-input" placeholder="搜索发件人...">
                    <input type="text" id="keyword-search-input" class="layui-input" placeholder="搜索标题、简介...">
                    <button class="layui-btn layui-btn-primary" id="search-btn"><i class="layui-icon layui-icon-search"></i></button>
                </div>
            </div>
            <div class="header-right">
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img src="images/user-avatar.png" class="layui-nav-img">
                            <span id="username-display">未登录</span>
                        </a>
                        <dl class="layui-nav-child" id="user-menu-dropdown">
                            <!-- 菜单项将由JS动态生成 -->
                        </dl>
                    </li>
                </ul>
            </div>
        </header>

        <!-- 主体区域 -->
        <div class="main-container">
            <!-- 第一栏: 账户和文件夹 -->
            <aside class="column-one">
                <!-- 移动端搜索栏容器 -->
                <div class="mobile-search-container" style="display: none;">
                    <div class="mobile-search-bar">
                        <input type="text" id="mobile-sender-search-input" class="layui-input" placeholder="搜索发件人...">
                        <input type="text" id="mobile-keyword-search-input" class="layui-input" placeholder="搜索标题、简介...">
                        <button class="layui-btn layui-btn-primary" id="mobile-search-btn"><i class="layui-icon layui-icon-search"></i></button>
                    </div>
                </div>
                
                <div class="column-one-header">
                    <div class="header-buttons-row">
                        <button id="add-account-btn" class="layui-btn layui-btn-primary layui-btn-sm">
                            <i class="layui-icon layui-icon-add-1"></i> 添加邮箱
                        </button>
                        <button id="compose-email-btn" class="layui-btn layui-btn-primary layui-btn-sm">
                            <i class="layui-icon layui-icon-edit"></i> 写邮件
                        </button>
                        <div class="header-buttons-spacer"></div>
                        <div class="layui-btn-group">
                            <button id="toggle-folders-btn" class="layui-btn layui-btn-primary layui-btn-xs" title="折叠所有文件夹">
                                <i class="layui-icon layui-icon-up"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="column-one-content">
                    <ul id="account-folder-list">
                        <!-- 动态加载邮箱账户和文件夹 -->
                    </ul>
                </div>
            </aside>

            <!-- 第二栏: 邮件列表 -->
            <main class="column-two" id="email-list-container">
                <!-- 左侧折叠按钮 -->
                <button class="collapse-btn collapse-btn-left" id="collapse-left-btn" title="折叠/展开左侧栏">
                    <i class="layui-icon layui-icon-left"></i>
                </button>
                
                <!-- 右侧折叠按钮 -->
                <button class="collapse-btn collapse-btn-right" id="collapse-right-btn" title="折叠/展开右侧栏">
                    <i class="layui-icon layui-icon-right"></i>
                </button>
                
                <div class="email-list-toolbar">
                    <div class="toolbar-left">
                        <div class="layui-form" style="display: inline-block; vertical-align: middle;">
                            <input type="checkbox" name="selectAll" id="select-all-emails" lay-skin="primary">
                        </div>
                        <button class="toolbar-btn" id="multi-select-btn" title="多选"><i class="layui-icon layui-icon-app"></i></button>
                        <button class="toolbar-btn" id="delete-selected-emails" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
                        <button class="toolbar-btn" id="move-selected-emails" title="移动"><i class="layui-icon layui-icon-export"></i></button>
                        <button class="toolbar-btn" id="permanent-delete-selected-emails" title="彻底删除"><i class="layui-icon layui-icon-close-fill"></i></button>
                        <button class="toolbar-btn" id="mark-read-btn" title="标记为已读/全部已读"><i class="layui-icon layui-icon-ok-circle"></i></button>
                    </div>
                    <div class="toolbar-right">
                        <button class="toolbar-btn" id="refresh-email-list" title="从邮箱服务器刷新"><i class="layui-icon layui-icon-refresh-3"></i></button>
                    </div>
                </div>
                <div id="email-list-wrapper">
                    <div class="placeholder">请选择邮件</div>
                </div>
            </main>

            <!-- 第三栏: 邮件详情 -->
            <section class="column-three" id="email-detail-container">
                <iframe id="email-content-iframe" name="email-content-iframe" frameborder="0" style="width: 100%; height: 100%; display: none;"></iframe>
                <div class="placeholder">请选择邮件以查看详情</div>
            </section>
            
            <!-- 移动端遮罩层 -->
            <div class="mobile-overlay" id="mobile-overlay"></div>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script src="js/Sortable.min.js"></script>
    <script src="js/wangeditor.min.js"></script>
    <script src="js/api.js"></script>
    <script src="js/common.js"></script>
    <script src="js/link-safety.js"></script>
    <script src="js/notification.js"></script>
    <script src="js/layout.js"></script>
    <script src="js/proxy.js"></script>
    <script src="js/translation.js"></script>
    <script src="js/account.js"></script>
    
    <!-- 邮件模块 - 按依赖顺序加载 -->
    <script src="js/email/list.js"></script>
    <script src="js/email/details.js"></script>
    <script src="js/email/draft.js"></script>
    <script src="js/email/operations.js"></script>
    <script src="js/email/interactions.js"></script>
    <script src="js/email/account.js"></script>
    <script src="js/email.js"></script>
    
    <script src="js/main.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/debug.js"></script>

    <!-- 写邮件弹窗 -->
    <div id="compose-email-modal" style="display: none; padding: 20px;">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="compose-input-wrapper">
                    <div class="email-tags-container" id="compose-to-container">
                        <input type="text" class="email-tags-input" id="compose-to-input" placeholder="请输入收件人邮箱，按回车添加" autocomplete="off">
                    </div>
                    <input type="hidden" name="to" id="compose-to" required lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="compose-input-wrapper">
                    <div class="email-tags-container" id="compose-cc-container">
                        <input type="text" class="email-tags-input" id="compose-cc-input" placeholder="请输入抄送邮箱，按回车添加" autocomplete="off">
                    </div>
                    <input type="hidden" name="cc" id="compose-cc">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="compose-input-wrapper">
                    <input type="text" name="subject" id="compose-subject" required lay-verify="required" placeholder=" " autocomplete="off" class="layui-input">
                    <label class="form-label">主题</label>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <div id="compose-body-editor"></div>
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn layui-btn-sm" id="upload-attachment-btn">
                    <i class="layui-icon layui-icon-upload"></i> 上传附件
                </button>
                <div id="attachment-list" style="margin-top: 10px;"></div>
            </div>
        </form>
    </div>

    <script>
        // 检测URL参数中的app_mode并存储到localStorage
        (function() {
            const urlParams = new URLSearchParams(window.location.search);
            const appModeParam = urlParams.get('app_mode');

            if (appModeParam !== null) {
                // 如果URL中有app_mode参数，存储到localStorage
                if (appModeParam === 'true' || appModeParam === '1') {
                    localStorage.setItem('app_mode', 'true');
                    console.log('应用模式已启用（通过URL参数）');
                } else if (appModeParam === 'false' || appModeParam === '0') {
                    localStorage.setItem('app_mode', 'false');
                    console.log('应用模式已禁用（通过URL参数）');
                }

                // 可选：清理URL参数，避免参数一直显示在地址栏
                if (window.history && window.history.replaceState) {
                    const cleanUrl = window.location.pathname + window.location.hash;
                    window.history.replaceState({}, document.title, cleanUrl);
                }
            }
        })();

        var editor; // 全局变量，用于存储 WangEditor 实例
        layui.use(['element', 'layer', 'form', 'upload'], function(){
            var element = layui.element;
            var form = layui.form;
            var upload = layui.upload;
            var $ = layui.$;
            App.init();

            // 写邮件按钮点击事件
            $('#compose-email-btn').on('click', function() {
                EmailModule.openComposeModal();
            });

            // 监听发送邮件表单提交
            form.on('submit(sendEmail)', function(data){
                data.field.body = editor.txt.html(); // 获取编辑器内容
                EmailModule.sendEmail(data.field);
                layer.closeAll('page'); // 关闭所有页面层
                return false; // 阻止表单跳转
            });
        });
    </script>
</body>
</html>
